@mixin flex-center($direction: row)  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
};

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// .container {
//   @include flex-center;
//   @include border-radius(10px);
//   height: 100vh;
// }

/*
混入 Mixin
  通过 @mixin 创建可复用的代码块，通过 @include 调用。
  特点：
    可以传递参数（动态内容）。
    每次调用会生成独立的 CSS 规则。
    适合需要灵活定制的样式（如主题、响应式断点）。
*/


// 清除浮动
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.row {
  @include clearfix;
}